<template>
  <div class="reason full-height bg-white page-content content">
    <!-- tab -->
    <template>
      <div class="margin-l-20 margin-r-20">
        <q-tabs
          v-model="tab"
          narrow-indicator
          inline-label
          dense
          align="left"
          indicator-color="primary"
          active-color="primary"
          style="padding: 0 15px"
          class="tab-label"
        >
          <q-tab
            v-stat="{id:CommonConfig.statData.reason.badReasonPage.id,name:CommonConfig.statData.reason.badReasonPage.name}"
            v-has="{id: Enums.SYS_PERMISSION.DEFECTIVENESS_REASON_TAB.value,
            type: Enums.SYS_PERMISSION.DEFECTIVENESS_REASON_TAB.type
            }"
            name="defective" icon="iconfont icontubiao-113" label="不良原因" />
<!--          <q-tab-->
<!--            v-stat="{id:CommonConfig.statData.reason.giveAwayReasonPage.id,name:CommonConfig.statData.reason.giveAwayReasonPage.name}"-->
<!--            v-has="{id: Enums.SYS_PERMISSION.CONCESSION_REASON_TAB.value,-->
<!--            type: Enums.SYS_PERMISSION.CONCESSION_REASON_TAB.type-->
<!--            }"-->
<!--            name="compromise" icon="iconfont icontubiao-114" label="让步原因" />-->
<!--          <q-tab-->
<!--            v-stat="{id:CommonConfig.statData.reason.stopReasonPage.id,name:CommonConfig.statData.reason.stopReasonPage.name}"-->
<!--            v-has="{-->
<!--            id: Enums.SYS_PERMISSION.STOP_REASON_TAB.value,-->
<!--            type: Enums.SYS_PERMISSION.STOP_REASON_TAB.type-->
<!--            }"-->
<!--            name="machineHalt" icon="iconfont icontubiao-115" label="停机原因" />-->
          <!--<q-tab name="change" icon="iconfont icontubiao-117" label="换刀原因" />-->
          <!--<q-tab name="repair" icon="iconfont icontubiao-116" label="返修原因" />-->
        </q-tabs>
        <q-separator style="flex: none;" />
      </div>
    </template>
    <!-- tab内容 -->
    <q-tab-panels
      v-tabcur="{tab: [
  {id: Enums.SYS_PERMISSION.DEFECTIVENESS_REASON_TAB.value, name: 'defective'}]}"
      v-model="tab" animated class="full-height">
      <!-- 零件不良原因 -->
      <q-tab-panel
        v-has="{id: Enums.SYS_PERMISSION.DEFECTIVENESS_REASON_TAB.value,
            type: Enums.SYS_PERMISSION.DEFECTIVENESS_REASON_TAB.type
            }"
        name="defective" class="padding-20">
        <defective-content ref="defective"/>
      </q-tab-panel>
      <!-- 零件不良原因End -->
      <!-- 让步原因 -->
<!--      <q-tab-panel-->
<!--        v-has="{id: Enums.SYS_PERMISSION.CONCESSION_REASON_TAB.value,-->
<!--            type: Enums.SYS_PERMISSION.CONCESSION_REASON_TAB.type-->
<!--            }"-->
<!--        name="compromise" class="padding-20">-->
<!--        <compromise-content ref="compromise"/>-->
<!--      </q-tab-panel>-->
      <!-- 让步原因End -->
      <!-- 停机原因 -->
<!--      <q-tab-panel-->
<!--        v-has="{-->
<!--            id: Enums.SYS_PERMISSION.STOP_REASON_TAB.value,-->
<!--            type: Enums.SYS_PERMISSION.STOP_REASON_TAB.type-->
<!--            }"-->
<!--        name="machineHalt" class="padding-20">-->
<!--        <stop-content ref="stop"/>-->
<!--      </q-tab-panel>-->
      <!-- 停机原因End -->
      <!-- 换刀原因 -->
      <!--<q-tab-panel name="change" class="padding-20">-->
        <!--<div class="text-h6">defective</div>-->
        <!--Lorem ipsum dolor sit amet consectetur adipisicing elit.-->
      <!--</q-tab-panel>-->
      <!--&lt;!&ndash; 换刀原因End &ndash;&gt;-->
      <!--&lt;!&ndash; 返修原因 &ndash;&gt;-->
      <!--<q-tab-panel name="repair" class="padding-20">-->
        <!--<div class="text-h6">defective</div>-->
        <!--Lorem ipsum dolor sit amet consectetur adipisicing elit.-->
      <!--</q-tab-panel>-->
      <!-- 返修原因End -->
    </q-tab-panels>
    <!-- tab内容End -->
  </div>
</template>

<script>
import defectiveContent from './components/defective-content'
// import compromiseContent from './components/compromise-content'
// import stopContent from './components/stop-content'
import statMixin from '../../assets/js/stat-mixin'
export default {
  name: 'reason',
  mixins: [statMixin],
  components: {
    defectiveContent
    // compromiseContent
    // stopContent
  },
  data () {
    return {
      tab: 'defective' // 选中的 tab
    }
  },
  created () {
    // 初始化埋点数据
    // this.addStat('dlp010501', '不良原因界面')
  },
  methods: {
  }
}
</script>

<style scoped lang="stylus">
  .page-content{
    padding 10px 0 0
  }
  .padding-20{
    padding-left 20px
    padding-right 20px
  }
</style>
